antd的a

2024-05-31 13:59| 来源: 网络整理| 查看: 265

antd的a-table表格中合并且使用插槽问题 1. customRender合并单元格

在antd官方文档中，是由使用customRender方式将单元格合并的方法

data() { const columns = [ { title: 'Name', dataIndex: 'name', customRender: (text, row, index) => { if (index text}; } return { children: {text}, attrs: { colSpan: 5, }, }; }, }, { title: 'Age', dataIndex: 'age', customRender: renderContent, }, { title: 'Home phone', colSpan: 2, dataIndex: 'tel', customRender: (value, row, index) => { const obj = { children: value, attrs: {}, }; if (index === 2) { obj.attrs.rowSpan = 2; } // These two are merged into above cell if (index === 3) { obj.attrs.rowSpan = 0; } if (index === 4) { obj.attrs.colSpan = 0; } return obj; }, }, { title: 'Phone', colSpan: 0, dataIndex: 'phone', customRender: renderContent, }, { title: 'Address', dataIndex: 'address', customRender: renderContent, }, ]; return { data, columns, }; }

效果如下在这里插入图片描述

使用customRender方式确实可以对表格进行特殊处理，像此处就进行单元格合并操作，但很多操作必须在单元个中插入组件的操作,举例,如下图所示 { title: '详细操作', dataIndex: 'content', scopedSlots: {customRender: 'operation'}, align: 'center', customRender: (text, row, index) => { return { // 否则以独占4列的文本形式被渲染 children: text, attrs: { rowSpan: row.row } } } } 子集条件确认如果用过的人可以知道，此处的表头详细操作确实跨行合并了，但是组件内容却并没有重写

再此处可以发现这个地方的插槽 scopedSlots: {customRender: ‘operation’} 方法没有加载组件因为 customRender: (text, row, index) => { return { children: text, attrs: { rowSpan: row.row } } } 重载了 scopedSlots: {customRender: ‘operation’}

所以处理方式只能在children的属性中写入，具体如下

customRender: (text, row, index) => { ·let setTime = setTimeout(()=>{ let button = document.getElementById("queryChildList"); let submit = document.getElementById("submit") button.onclick = function(){ 　　//此处省略　　} submit.onclick = function(){ 　　//此处省略　　}　 },100) return { children: ( 子条件集合确认), attrs: { rowSpan: row.row } } }

但是此操作无法加载vue的组件，只能使用原生的js操作

2. customCell合并

antd在原文档中有这个属性在这里插入图片描述在文档中的示例却只有如下所示

//customRow 用法 # //适用于 customRow customHeaderRow customCell customHeaderCell。遵循Vue jsx语法。 return { props: { xxx... //属性 }, on: { // 事件 click: (event) => {}, // 点击行 dblclick: (event) => {}, contextmenu: (event) => {}, mouseenter: (event) => {}, // 鼠标移入行 mouseleave: (event) => {} }, }; )} customHeaderRow={(column) => { return { on: { click: () => {}, // 点击表头行 } }; )} />

再没有多余阐述中，你没有看错，没有其他说明了，当时就想问候写文档人的亲戚了。。。

在我深入底层源码中，我找到了这个属性对应适用的字段在这里插入图片描述示例

{ title: '选额内容', align: 'center', dataIndex: 'row', scopedSlots: {customRender: 'row'}, customCell: ((record, rowIndex) => { return { style: {display: record.row === 0 ? 'none' : undefined}, attrs: { rowSpan: record.row, } } }) }

这样就可在operation这个列中使用它从插槽

效果如下图所示在这里插入图片描述

初出茅庐，有错误还请纠正

【本文地址】

公司简介

联系我们